@charset "utf-8";

// 首页头部部分1 
.mz-index-header{
  position: absolute;
  top: 0;
  width: 100%;
  height: 81px;
  line-height: 81px;
  z-index: 10;
  .mz-topbar{
    min-width: 1200px;
    .mz-nav{
      li{
        a{
          color: #fff;
          font-size: 14px;
        }
        &:hover a{
          color: #008cff;
        }
      }
    }
    .mz-search{
      width: 170px;
      height: 30px;
      background-color: #fff;
      border-radius: 20px;
      input{
        height: 30px;
        outline: none;
        font-size: 12px;
      }
      i{
        font-size: 20px;
        color: #515151;
        cursor: pointer;
      }
    }
    .mz-login{
      position: relative;
      line-height: 60px;
      img{
        width: 29px;
        height: 29px;
        vertical-align: middle;
      }
      .mz-login-list{
        display: none;
        margin-top: 15px;
        padding: 6px 0;
        position: absolute;
        left: -34px;
        top: 45px;
        width: 96px;
        border: 1px solid #efefef;
        border-radius: 3px;
        background-color: #fff;
        li{
          padding: 0 10px;
          height: 33px;
          line-height: 33px;
          a{
            color: #666;
            font-size: 12px;
          }
        }
        &::before{
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          top: -6px;
          margin: auto;
          width: 10px;
          height: 10px;
          border-top: 1px solid #efefef;
          border-left: 1px solid #efefef;
          background-color: #fff;
          transform: rotate(45deg);
        }
      }
      &:hover ul{
        display: block;
        z-index: 10;
      }
    }
    .mz-shopcar{
      position: relative;
      line-height: 60px;
      img{
        width: 25px;
        vertical-align: middle;
      }
      span{
        position: absolute;
        top: 13px;
        right: -5px;
        width: 15px;
        height: 15px;
        font-size: 12px;
        border-radius: 50%;
        line-height: 15px;
      }
      .mz-shopcar-list{
        display: none;
        position: absolute;
        right: -10px;
        top: 71px;
        width: 320px;
        height: 120px;
        border: 1px solid #efefef;
        border-radius: 3px;
        background-color: #fff;
        &::before{
          content: "";
          position: absolute;
          right: 13px;
          top: -6px;
          width: 10px;
          height: 10px;
          border-top: 1px solid #efefef;
          border-left: 1px solid #efefef;
          background-color: #fff;
          transform: rotate(45deg);
        }
      }
      &:hover ul{
        display: block;
        z-index: 10;
      }
    }
  }
  .mz-nav-menu{
    width: 100%;
    .mz-menu{
      position: relative;
      &>ul,&>div{
        display: none!important;
        position: absolute;
        top: 0;
      }
      &>ul{
        left: 0;
        right: 0;
        margin: auto;
        background-color: #fff;
        li{
          width: 138.75px;
          flex: 0 0 auto!important;
          img{
            width: 123px;
          }
          .mz-info,.mz-price{
            color: #333;
            font-size: 12px;
            line-height: 15px;
          }
          .mz-info{
            margin-top: -26px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          &:hover img,&:hover p{
            filter: opacity(100%);
          }
        }
      }
      .mz-app-drop{
        height: 320px;
        background-color: #fff;
        img{
          width: 1170px;
          position: absolute;
          left: 0;
          right: 0;
          margin: auto;
        }
      }
      &>.current{
        display: flex!important;
      }
      &:hover img,&:hover p{
        filter: opacity(60%);
      }
    }
  }
}

// 首页banner部分
.mz-banner{
  z-index: -1;
  .mz-banner-pic{
    &>div{
      width: 100%;
      height: 670px;
      &.mz-b1{
        background: url("../images/index-banner1.jpg") no-repeat center/cover;
      }
      &.mz-b2{
        background: url("../images/index-banner2.jpg") no-repeat center/cover;
      }
      &.mz-b3{
        background: url("../images/index-banner3.jpg") no-repeat center/cover;
      }
      &.mz-b4{
        background: url("../images/index-banner4.jpg") no-repeat center/cover;
      }
      &.mz-b5{
        background: url("../images/index-banner5.jpg") no-repeat center/cover;
      }
      &.mz-b6{
        background: url("../images/index-banner6.jpg") no-repeat center/cover;
      }
      &.mz-b7{
        background: url("../images/index-banner7.jpg") no-repeat center/cover;
      }
    }
  }
  .mz-ind{
    bottom: 30px;
    li{
      margin: 0 7px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #fff;
    }
    .active{
      background-color: transparent;
      border: 1px solid #fff;
    }
  }
}

// 广告区域
.mz-adv{
  padding: 45px 0;
  background-color: #fff;
  li{
    text-align: center;
    a{
      display: block;
      width: 310px;
      text-decoration: none;
      img{
        width: 130px;
        height: 130px;
      }
      h3{
        margin: 7px 0;
        font-size: 20px;
        color: #333;
      }
      p{
        font-size: 14px;
        color: #999;
      }
      &:hover{
        opacity: .8;
      }
    }
  }
}